 <template>
   <view class="container">
     <!-- 浮动按钮 -->
     <view class="floating-button" @click="onFloatingButtonClick">
       <image src="/static/images/icon/toadd.png" class="icon-img" mode="aspectFit" />
     </view>
 
     <!-- 查询条件 -->
     <view class="filters">
       <view @click="toggleFilters" class="filter-header">
         <text>查询条件</text>
         <text>{{ showFilters ? '收起' : '展开' }}</text>
       </view>
       <view v-if="showFilters" class="filter-body">
         <input class="filter-input" v-model="query.name" placeholder="请输入供应商名称" />
         <view class="item-actions-inline">
           <button @click="search()" class="action-button">查询</button>
           <button @click="reset()" class="action-button danger">重置</button>
         </view>
       </view>
     </view>
 
     <!-- 列表 -->
     <view class="list-container" @scroll="handleScroll">
       <view v-for="item in listData" :key="item.id" class="list-item">
         <view @click="viewDetails(item)">
           <view class="list-detail">供应商编号：{{ item.id }}</view>
           <view class="list-detail">供应商名称：{{ item.name }}</view>
           <view class="list-detail">联系人：{{ item.contact }}</view>
           <view class="list-detail">手机号码：{{ item.mobile }}</view>
           <view class="list-detail">电子邮箱：{{ item.email }}</view>
           <view class="list-detail">传真：{{ item.fax }}</view>
           <view class="list-detail">开启状态：{{ formatStatus(item.status) }}</view>
           <view class="list-detail">备注：{{ item.remark }}</view>
           <view class="list-detail">创建时间：{{ formatDate(item.createTime) }}</view>
           <view class="divider"></view>
         </view>
         <view class="item-actions-inline">
           <button @click="editItem(item)" class="action-button">修改</button>
           <button @click="deleteItem(item)" class="action-button danger">删除</button>
         </view>
       </view>
       <view v-if="!hasMoreData" class="no-more-data">没有更多数据了</view>
       <view v-if="loading" class="loading-text">加载中...</view>
     </view>
   </view>
 </template>
 
 <script>
 import { pageList,deleteSupplier } from "@/sheep/api/erp/supplier.js";
 
 export default {
   data() {
     return {
       showFilters: false,
       query: {
         name: ''
       },
       listData: [],
       pageNum: 1,
       pageSize: 10,
       loading: false,
       hasMoreData: true
     };
   },
   methods: {
     toggleFilters() {
       this.showFilters = !this.showFilters;
     },
     reset() {
       this.query.name = ''; 
       this.refreshData();
     },
     search() {
       this.refreshData();
     },
     refreshData() {
       this.pageNum = 1;
       this.hasMoreData = true;
       this.listData = [];
       this.loadMoreData();
     },
     loadMoreData() {
       if (this.loading || !this.hasMoreData) return;
       this.loading = true;
       const params = {
         pageNo: this.pageNum,
         pageSize: this.pageSize,
         ...this.query
       };
        pageList(params)
         .then((res) => {
           const { list, total } = res.data;
           if (this.pageNum * this.pageSize >= total || list.length === 0) {
             this.hasMoreData = false;
           }
           this.listData = [...this.listData, ...list];
         })
         .catch((error) => {
           console.error('加载数据失败:', error);
         })
         .finally(() => {
           this.loading = false;
           uni.stopPullDownRefresh();
         });
     },
     onReachBottom() {
       if (this.loading || !this.hasMoreData) return;
       this.pageNum++;
       this.loadMoreData();
     },
     onPullDownRefresh() {
       this.refreshData();
     },
     handleScroll(event) {
       const { scrollTop, scrollHeight, clientHeight } = event.detail;
       if (scrollTop + clientHeight >= scrollHeight - 50) {
         this.onReachBottom();
       }
     },
     onFloatingButtonClick() {
       uni.setStorageSync('supplierId', '');
       uni.navigateTo({
         url: '/pages/erp/supplier/edit'
       });
     },
     editItem(item) {
       const supplierId = encodeURIComponent(item.id);
       uni.setStorageSync('supplierId', supplierId);
       uni.navigateTo({
         url: "/pages/erp/supplier/edit"
       });
     },
     viewDetails(item) {
       const supplierId = encodeURIComponent(item.id);
       uni.setStorageSync('supplierId', supplierId);
       uni.navigateTo({
         url: "/pages/erp/supplier/show"
       });
     },
     async deleteItem(item) {
       try {
         if (item.id) {
           await deleteSupplier(item.id);
         }
         this.refreshData();
       } catch (error) {
         console.error('删除失败:', error);
       }
     },
     formatStatus(status) {
       return status === 1 ? "启用" : "禁用";
     },
     formatDate(date) {
       if (!date) return '无';
       const d = new Date(date);
       const year = d.getFullYear();
       const month = String(d.getMonth() + 1).padStart(2, '0');
       const day = String(d.getDate()).padStart(2, '0');
       return `${year}-${month}-${day}`;
     }
   },
   onLoad() {
     this.refreshData();
   },
   onShow() {
     this.refreshData();
   }
 };
 </script>

<style scoped>
/* 页面样式 */
.container {
  padding: 3px;
  background-color: #eee;;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.tabs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 0 10px;
}

.tab-items {
  display: flex;
  flex: 1;
}

.tab-item {
  padding: 10px;
  text-align: center;
  font-size: 16px;
  color: #666;
}

.tab-item.active {
  color: #007aff;
  font-weight: bold;
  border-bottom: 2px solid #007aff;
}

.floating-button {
  position: fixed;
  bottom: 60px;
  right: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.icon-img {
  width: 40px;
  height: 40px;
}

/* 查询条件样式 */
.filters {
  margin: 5px 5px 0; /* 上、左、右 */
  background-color: #fff;
  border-radius: 5px;
  padding: 8px;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #333;
}

.filter-body {
  margin-top: 10px;
}

.filter-input {
  width: 100%;
  padding: 3px;
  font-size: 14px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.item-actions-inline {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.action-button {  
  	height: 25px;
  		width: 60px;
  		line-height: 25px;
  		text-align: center;
  		font-size: 13px;
  		border-radius: 3px;
  		background-color: #007aff;
  		color: #fff;
  		border: none;
  		/* 移除默认边框 */
  		cursor: pointer;
  		/* 鼠标指针变为手形 */
  		transition: background-color 0.3s ease;
  		/* 平滑过渡效果 */
  		padding: 1px 4px;      /* 减小上下内边距为 2px，左右内边距为 5px */
}

.action-button:hover {
  background-color: #0056b3;
}

.action-button:active {
  background-color: #004494;
  transform: translateY(1px);
}

.action-button.danger {
  background-color: #f44336;
}

.list-container {
  margin-top: 5px;
  flex: 1;
  overflow-y: auto;
  padding: 5px;
}

.list-item {
  background: #fff;
  padding: 10px;
  border: 1px solid #eee;
  margin-bottom: 10px;
  border-radius: 5px;
}

.list-detail {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.divider {
  border-top: 1px solid #eee;
  margin: 10px 0;
}

.no-more-data {
  text-align: center;
  padding: 10px;
  color: #999;
}

.loading-text {
  text-align: center;
  padding: 10px;
  color: #999;
}
</style>